@import "~common/styl/variable.styl"

.confirm
  position fixed
  left 0px
  right 0px
  top 0px
  bottom 0px
  z-index 990
  background-color $color-background-d
  &.confirm-fade-enter-active
    animation confirm-fade-in 0.3s
    .confirm-content
      animation confirm-zoom 0.3s
  .confirm-wrapper
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      z-index: 999
      .confirm-content
        width: 270px
        border-radius: 13px
        background: $color-highlight-background
        .text
          padding: 19px 15px
          line-height: 22px
          text-align: center
          font-size: $font-size-large
          color: $color-text-l
        .operate
          display: flex
          align-items: center
          text-align: center
          font-size: $font-size-large
          .operate-btn
            flex: 1
            line-height: 22px
            padding: 10px 0
            border-top: 1px solid $color-background-d
            color: $color-text-d
            &.left
              border-right: 1px solid $color-background-d

@keyframes confirm-fade-in
  0%
    opacity 0
  100%
    opacity 1

@keyframes confirm-zoom
  0%
    transform scale(0)
  50%
    transform scale(1.1)
  100%
    transform scale(1)